<template>
  <div class="search">
    <!-- 顶部搜索栏 -->
    <div class="search-input">
      <van-icon name="search" />
      <input type="text" placeholder="搜索" />
      <div>取消</div>
    </div>

    <!-- 历史记录 -->
    <!-- <div>

      <div class="history-clear">
        <span>历史记录</span>
        <img src="">
      </div>
      <div>
        <div><span>暂无数据</span></div>

        <div class="his-content">

          <span></span>

        </div>

      </div>

    </div> -->

    <!-- 热门搜索 -->
    <div class="search-hot">
      <div class="hot-title">热门搜索</div>
      <div class="hot-list">
        <div class="list-item">耳机</div>
        <div class="list-item">茶</div>
        <div class="list-item">纸</div>
        <div class="list-item">内裤</div>
        <div class="list-item">耳机</div>
        <div class="list-item">茶</div>
        <div class="list-item">纸</div>
        <div class="list-item">内裤</div>
        <div class="list-item">耳机</div>
        <div class="list-item">茶</div>
        <div class="list-item">纸</div>
        <div class="list-item">内裤</div>
        <div class="list-item">耳机</div>
        <div class="list-item">茶</div>
        <div class="list-item">纸</div>
        <div class="list-item">内裤</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'Search',
})
</script>

<script lang="ts" setup>

</script>

<style scoped>
.search-input {
  height: 70px;
  background-color: #fff;
}

.search-input .van-icon {
  position: relative;
  top: 20px;
  left: 25px;
  font-size: 20px;
  z-index: 2;
}

.search-input input {
  position: absolute;
  top: 10px;
  left: 15px;
  width: 230px;
  height: 28px;
  font-size: 14px;
  border: 0;
  background-color: #f4f4f4;
  border-radius: 4px;
  padding: 4px 35px;
}

.search-input div {
  width: 30px;
  position: relative;
  left: 330px;
  font-size: 14px;
}

.search-hot {
  background-color: #fff;
}

.search-hot .hot-title {
  font-size: 14px;
  color: #999999;
  margin-left: 15px;
}

.search-hot .hot-list {
  margin: 20px 15px;
}

.search-hot .hot-list .list-item {
  border: 1px solid #999999;
  font-size: 12px;
  border-radius: 5px;
  padding: 5px 7px;
  margin: 5px;
  display: inline-block;
}
</style>